<template>
<div>
  <section class="main isPc">
    <section class="people" :class="{none:checkStart}">
      <p class="pTitle"><router-link tag="a" to="/">首页</router-link> -  注册</p>
      <div class="info">
        <p class="title">登录信息</p>
        <div class="item itemBox">
          <p><span class="stitle">电子邮箱地址：</span>
            <input :class="{none:!emailCheck}" type="text" v-model="date.email" name=""><span class="msg"></span></p>
          <p><span class="stitle">密码：</span>
            <input :class="{none:!passwordCheck}" type="text" v-model="date.password" name=""><span class="msg">请输入6-20位，需要同时包含数字与英文字母</span></p>
          <p><span class="stitle">确认密码：</span>
            <input :class="{none:!password2Check}" type="text" v-model="date.password2" name=""><span class="msg"></span></p>
        </div>
        <p class="title">个人信息</p>
        <div class="item itemBox">
          <p><span class="stitle">Name：</span>
              <input :class="{none:!surnameCheck}" type="text" v-model="date.surname" name=""><span class="msg"></span></p>
          <p><span class="stitle">Sex：</span>
            <select v-model="date.gender" class="slong">
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </p>
            
            <p><span class="stitle">Phone Number：</span>
              <input :class="{none:!tellphoneCheck}" type="text" v-model="date.tellphone" name=""><span class="msg">请填写有效电话</span></p>

          <p><span class="stitle">Street Address：</span>
            <input :class="{none:!ACheck}" v-model="address.A" type="text" name=""><span class="msg">请详细填写，可以加快收货时间</span></p>
          
          <p><span class="stitle">City：</span>
            <input type="text" disabled value="Cardiff" name="">
          </p>
          <p><span class="stitle">Country：</span>
            <input type="text" disabled value="UK" name="">
          </p>
          <p><span class="stitle">Post Code：</span>
            <input :class="{none:!CCheck}" type="text" v-model="address.C" name="">
            <span class="msg">目前配送范围只限于CF3,CF5,CF10,CF11,CF14,CF23,CF24</span>
          </p>
          

        </div>
        <p class="title">使用条款</p>
        <div class="item item05">
          <span>有关 <a href="#">网站使用条款</a></span>
          <span :class="{none:!agreementCheck}"><input  type="checkbox" v-model="agreement" id="c1"><label for="c1">是的，同意使用协议并注册</label></span>
        </div>
      </div>
      <div class="clickBox">
        <p v-if="!allCheck" class="regMessage">{{message}}</p>
        <button class="empty">取消</button>
        <button class="active" @click="postReg">继续</button>
      </div>
    </section>
  </section>



  <section class="mainWap isWap">
    <section class="people peopleWap" :class="{none:checkStart}">
      <p class="wapTopTitle">会员注册</p>
      <div class="info">
        <p class="title">登录信息</p>
        <div class="item itemBox">
          <p><span class="stitle" :class="{none:!emailCheck}">电子邮箱地址：</span>
            <input :class="{none:!emailCheck}" type="text" v-model="date.email" name=""><span class="msg"></span></p>
          <p><span class="stitle" :class="{none:!passwordCheck}">密码：</span>
            <input :class="{none:!passwordCheck}" type="text" v-model="date.password" placeholder="请输入6-20位，需要同时包含数字与英文字母" name=""></p>
          <p><span class="stitle" :class="{none:!password2Check}">确认密码：</span>
            <input :class="{none:!password2Check}" type="text" v-model="date.password2" name=""><span class="msg"></span></p>
        </div>
        <p class="title">个人信息</p>
        <div class="item itemBox">
          <p><span class="stitle" :class="{none:!surnameCheck}" >Name：</span>
              <input :class="{none:!surnameCheck}" type="text" v-model="date.surname" name=""><span class="msg"></span></p>
          <p><span class="stitle">Sex：</span>
            <select v-model="date.gender" class="slong">
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </p>
            
            <p><span class="stitle" :class="{none:!tellphoneCheck}">Phone Number：</span>
              <input :class="{none:!tellphoneCheck}" type="text" placeholder="请填写有效电话" v-model="date.tellphone" name=""></p>

          <p><span class="stitle" :class="{none:!ACheck}">Street Address：</span>
            <input :class="{none:!ACheck}" v-model="address.A" type="text" placeholder="请详细填写，可以加快收货时间" name=""></p>
          
          <div>
            <span class="stitle">City：</span>
            <p class="wapNewP">Cardiff</p>
          </div>
          <div><span class="stitle">Country：</span>
            <p class="wapNewP">UK</p>
          </div>
          <p><span class="stitle" :class="{none:!CCheck}" >Post Code：</span>
            <input :class="{none:!CCheck}" type="text" placeholder="目前配送范围只限于CF3,CF5,CF10,CF11,CF14,CF23,CF24" v-model="address.C" name="">
          </p>
 
        </div>
        <p class="title">使用条款</p>
        <div class="item item05">
          <span><a href="#">有关使用条款</a></span>
          <span class="right" :class="{none:!agreementCheck}"><input  type="checkbox" v-model="agreement" id="c1"><label for="c1">是的，同意使用协议并注册</label></span>
        </div>
      </div>
      <div class="wapBox">
        <p v-if="!allCheck" class="regMessage">{{message}}</p>
        <button @click="postReg">确认</button>
        <button >返回</button>
      </div>
    </section>
  </section>
</div>
  
</template>
<script>
import axios from 'axios'
import { Get, Post,Login } from '@/config/api.js'
export default {
  name: 'about',
  data() {
    return {
      textStart:true,//是否同意协议
      addressList: '',
      date: {
        email: '',
        password: '',
        password2: '',
        surname: '',
        username: '',
        gender: 1,
        tellphone: ''
      },
      agreement:true,//同意协议
      agreementStart:false,//同意状态
      message:'',
      address: {
        A: '',
        B: '',
        C: ''
      },
      checkStart: false
    }
  },
  computed: {
    allCheck: function() {
      if (this.emailCheck && this.passwordCheck && this.password2Check && this.surnameCheck && this.tellphoneCheck && this.ACheck && this.CCheck&&this.agreementCheck) {
        return true
      } else {
        return false
      }
    },
    //邮箱
    emailCheck() {
      if (this.InputEmail(this.date.email)) {
        return true
      } else {
        return false
      }
    },
    //密码
    passwordCheck() {
      if (this.Password(this.date.password)) {
        return true
      } else {
        return false
      }
    },
    //第二次密码
    password2Check() {
      if (this.date.password2 == this.date.password && this.date.password2 != '') {
        return true
      } else {
        return false
      }
    },
    //姓
    surnameCheck() {
      if (this.Input(this.date.surname)) {
        return true
      } else {
        return false
      }
    },
    //电话
    tellphoneCheck() {
      if (this.Input(this.date.tellphone)) {
        return true
      } else {
        return false
      }
    },
    //收货信息
    //收货人
    ACheck() {
      if (this.Input(this.address.A)) {
        return true
      } else {
        return false
      }
    },
    //收货人电话
    CCheck() {
      if (this.Input(this.address.C)) {
        return true
      } else {
        return false
      }
    },
    //收货人电话
    agreementCheck() {
      if (this.agreement) {
        return true
      } else {
        return false
      }
    }
    

  },
  mounted() {
    this.$store.dispatch("isLoading",false)
    //this.getData()
    //this.getAddress()

    $(document).on('click','.peopleWap input,.peopleWap select',function(){
      $('.peopleWap p').removeClass('on')
      $(this).parent().addClass('on')
    })

  },
  methods: {

    //点击注册
    async postReg() {
      if (this.allCheck) {
        this.$store.dispatch("isLoading",true)
          let data = {
            "registered_method": "email",
            "email": this.date.email,
            "password": this.date.password,
            "gender": this.date.gender,
            "surname": this.date.surname,
            "username": this.date.surname,
            "tellphone": this.date.tellphone
          }
          let that=this
          await Post('/users', this.$store.state.token, data).then(function(){
            that.getLogin()
          }).catch(function(err){
            alert(err.data.message)
          })
          
        
      } else {
        this.message='您所输入的项目有误，请确认后再继续'
        this.checkStart = true
      }
    },
    //注册后登录
    async getLogin(){
      let name = this.date.email
      let password = this.date.password

      let date = {
          "grant_type": "password",
          "client_id": "app",
          //"client_secret": "WdmxLMvCngT8O5zKUpXICH0ZOdCjot5qTl1rdk4T",
          "client_secret": "Mi2y$10$2EWnVYGTqunVafKUcT4oPrfYNxIQZRFn",
          "scope": "app",
          "username": name,
          "password": password
      }
      let that=this
      await Login(date).then(function(reg){
        let token = reg.data.access_token
        var arr = token.split('');
        var passToken = "";
        for (var i = 0; i < token.length; i++) {
          passToken += arr[i].charCodeAt();
          passToken += "/";
        }
        var lastToken = passToken.substring(0, passToken.length - 1)
        var d = new Date();
        d.setTime(d.getTime() + (604800000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = "login" + "=" + lastToken + "; " + expires;
        that.$store.dispatch("loginsync",token);
      })
      this.addressAdd()
    },
    //添加收货地址
    async addressAdd() {
      if (this.vLogin()) {
        let data = {
          "address": this.address.A,
          "state": this.address.A,
          "post_code": this.address.C,
          "mobile": this.date.tellphone,
          "first_name": this.date.surname,
          "last_name": this.date.username,
          "is_default": 1
        }
        let reg = await Post('/users/address', this.$store.state.token, data)
        this.$store.dispatch("isLoading",false)
        this.$router.push('/registerSuccess')
      }
    }

  }
}

</script>
